<template>
  <div class="TripsNumber">
    <div class="table_handle_header">
      <div class="table_status">
        <div v-for="item in table_status" :key="item.color" class="status_item">
          <span class="status_box" :style="{ backgroundColor: item.color }"></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="trip_table" v-show="isMerge">
      <div class="table">
        <!-- <BasicTable :column="column" :tableData="tableData" :isSelect="false" @select="ChangeSelect" @rowClick="rowClick"
          isRowRight :rightMenu="rightMenu" :isShowSerial="false">
        </BasicTable> -->

        <el-table :data="tableData" border>          
          <el-table-column v-for="(item, idx ) in column" :key="item.id" :label="item.label" :prop="item.prop"
            align="center">
            <template #default="scope">
              {{ scope}}
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
  </div>
</template>

<script setup>
import BasicTable from '@/components/BasicTable/BasicTable.vue'
import { getTimetableList } from '@/api/dispatch/routeLine'
import { watch } from 'vue';

const table_status = [
  {
    name: '正常执行',
    color: '#538d35'
  },
  {
    name: '发车晚点',
    color: '#3d7024'
  },
  {
    name: '运行中',
    color: '#4d6fc2'
  },
  {
    name: '到站考核异常',
    color: '#af2e3a'
  },
  {
    name: '未执行',
    color: '#1c2f61'
  },
  {
    name: '已取消',
    color: '#3f4451'
  }
]

const isMerge = ref(true)
const isSearch = ref(false)
const table_height = ref('356px')
watch(isSearch, () => {
  table_height.value = '356px'
  if (isSearch.value) table_height.value = '306px'
})
const ChangeSelect = (val) => {
  console.log(val, '当前选中的数据');
}
const rowClick = (row) => {
  console.log(row, '点击的当前行的数据');
}

// 列配置
const column = ref([
  { prop: '', label: '部位' },
  { prop: '', label: '序号' }
])
// 右键菜单
const rightMenu = ref([
  {
    content: '查看车辆',
    methods: (e) => {
      console.log(e, '查看车辆');
    },
  },
  {
    content: '修改车辆状态',
    children: [
      {
        content: '在线',
        methods: (e) => {
          console.log(e, '设置在线状态');
        },
      },
      {
        content: '修改离线状态',
        methods: (e) => {
          console.log(e, '设置离线状态');
        },
      }
    ]
  }
])

// 表格数据
const tableData = ref([])
const route = useRoute()
onMounted(() => {
  getTimetableList(route.query).then(res => {
    console.log('这个运营时刻表', res);
    // tableData.value = res.data
    // res.data.forEach(item => {
    res.data[0].timetableList.forEach((val, idx) => {
      column.value.push({ prop: val, label: "趟次" + (idx + 1) })
    })
    // });
    console.log('筛选出来的数据', column.value);
  })
})

</script>

<style lang="scss" scoped>
@import './assets/black_table.scss';

:deep(.el-checkbox) {
  align-items: normal;
  padding-top: 8px;
}

.trip_table {
  padding: 0 20px;

  .table {
    padding: 0 0 10px;
    height: v-bind(table_height);
    overflow-y: scroll;
  }
}

.table_handle_header {
  height: 51px;
  padding: 0px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;

  .table_status {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: end;

    .status_item {
      margin-right: 20px;

      .status_box {
        display: inline-block;
        height: 12px;
        width: 12px;
        border-radius: 2px;
        margin-right: 10px;
      }
    }
  }
}
</style>